<template>
	<div style="background-color: #f5f5f5;">
		<input type="file" accept=".xls,.xlsx" class="upload-file" @change="changeExcel($event)" />
		<el-card class="box-card" style="margin: 40px;">
			<h3 style="padding-left:10px;"><b>学生导入</b></h3>
			<el-divider />
			<el-table :data="clockTable" border stripe>
				<el-table-column type="selection" width="55" align="center" />
				<el-table-column align="center" prop="studentId" label="学号" width="400" sortable />
				<el-table-column align="center" prop="collegeName" label="学院" width="400" />
				<el-table-column align="center" prop="userName" label="姓名" width="130" />
				<el-table-column align="center" prop="className" label="班级" width="130" />
				<el-table-column align="center" prop="sex" label="性别" width="100" />
				<el-table-column align="center" prop="phone" label="手机号" width="100" />
				<el-table-column align="center" prop="majorName" label="专业" width="150" />
				<el-table-column align="center" label="操作" width="150">
					<template #default="scope">
						<el-button @click="getsid(scope.row.studentId)" plain>Plain</el-button>
						<el-button @click="handleAddBtn()" plain>新建</el-button>
						<el-button @click="handleAddBtn()" plain>删除</el-button>
						<el-button type="text" @click="edit(scope.row)">点击打开 Dialog</el-button>
						<el-button type="primary" size="small" @click.native.prevent="deleteRow(scope.$index)">删除222
						</el-button>
					</template>
				</el-table-column>

			</el-table>
			<el-dialog v-model="centerDialogVisible" title="Warning" width="30%" center>
				<el-form :model="test" label-width="120px">
					<el-form-item label="学号">
						<el-input v-model="test.studentId" />
					</el-form-item>
					<el-form-item label="学院1">
						<el-input v-model="test.collegeName" />
					</el-form-item>
					<el-form-item label="姓名1">
						<el-input v-model="test.userName" />
					</el-form-item>
					<el-form-item label="班级1">
						<el-input v-model="test.className" />
					</el-form-item>
					<el-form-item label="性别1">
						<el-input v-model="test.sex" />
					</el-form-item>
					<el-form-item label="手机号1">
						<el-input v-model="test.phone" />
					</el-form-item>
					<el-form-item label="专业1">
						<el-input v-model="test.majorName" />
					</el-form-item>
				</el-form>
				<template #footer>
					<span class="dialog-footer">
						<el-button @click="centerDialogVisible = false">Cancel</el-button>
						<el-button type="primary" @click="edit2()">Confirm</el-button>
					</span>
				</template>
			</el-dialog>
		</el-card>

	</div>
</template>

<script>
	import {
		ref
	} from 'vue'
	import * as XLSX from 'xlsx'
	import {
		ElMessage
	} from 'element-plus'


	export default {
		data() {
			return {
				test: [
					{
						
					},
				],
				centerDialogVisible: false,
				reasonValue: '',
				proveValue: '',

				clockTable: [{
					userName: '',
					studentId: '',
					password: '',
					sex: '',
					phone: '',
					className: '',
					majorName: '',
					collegeName: '',
					userId: '',
					collegeId: '',


				}, ],
				classTable: [{
					className: '',
					majorId: '',
					userId: '',


				}, ],
				ReasonDialogVisible: false,
				proveDialogVisible: false,
				FailDialogVisible: false,
				userList: [],
				temp: [],
				temp2: [{
					majorId: '',
				}],
				temp3: [{
					userId: '',
				}]
			}
		},
		methods: {
			edit(param){
				const _self = this;
				_self.centerDialogVisible = true;
				_self.test = param;
				
			},
			edit2(){
				const _self = this;
				_self.centerDialogVisible = true;
				this.$axios.post('http://localhost:8849/Account/edit', {
					userName:this.test.userName,
					sex:this.test.sex,
					phone:this.test.phone,
					StudentId:this.test.studentId,
				}, {
					headers: {
						"Authorization": this.$cookies.get('token')
					}
				}).then(function(response) {
					console.log(_self.test);
					if (response.data.code === 200) {
						ElMessage.success('Oops, this is a success message.');
					} else {
						ElMessage.error('Congrats, this is a error message.');
					}
				});
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			compare() {
				const _self = this;
				_self.userList.forEach(function(item) {
					let obj = _self.clockTable.find(value => value.collegeName == item.collegeName);
					obj.collegeId = item.collegeId;
					_self.temp.push(obj);
					_self.$axios.post('http://localhost:8849/class/saveMajor', {
						jsonArray: _self.temp,
					}, {
						headers: {
							"Authorization": _self.$cookies.get('token')
						}
					}).then(function(response) {
						_self.userList = response.data.data.userList;
						_self.compare2();
						console.log(response);
						if (response.data.code === 200) {
							// form.StudentId:response.data.data.studentId,
							console.log("majoryes");
						}
					})

				});
				console.log(this.temp[0]);
			},
			compare2() {
				const _self = this;
				_self.userList.forEach(function(item) {
					let obj = _self.clockTable.find(value => value.majorName == item.majorName);
					obj.majorId = item.majorId;
					_self.temp2.push(obj);
					_self.$axios.post('http://localhost:8849/class/saveClass', {
						jsonArray: _self.temp,
					}, {
						headers: {
							"Authorization": _self.$cookies.get('token')
						}
					}).then(function(response) {
						console.log(response);
						if (response.data.code === 200) {
							// form.StudentId:response.data.data.studentId,
							console.log("classidyes");
						}
					})

				});
				console.log(this.temp[0]);
			},
			compare3() {
				const _self = this;
				_self.userList.forEach(function(item) {
					let obj = _self.clockTable.find(value => value.studentId == item.studentId);
					obj.userId = item.userId;
					_self.temp3.push(obj);
					_self.$axios.post('http://localhost:8849/class/saveClass', {
						jsonArray: _self.temp3,
					}, {
						headers: {
							"Authorization": _self.$cookies.get('token')
						}
					}).then(function(response) {
						console.log(response);
						if (response.data.code === 200) {
							// form.StudentId:response.data.data.studentId,
							console.log("useridyes");
						}
					})

				});
				console.log(this.temp[0]);
			},
			deleteRow(index) {
				this.clockTable.splice(index, 1);
			},
			handleAddBtn() {
				// this.getaddress = "";	//临时存储用户地址
				let obj = {}; //创建空的对象
				obj.userName = ""; //用户名称
				obj.studentId = ""; //账号
				obj.password = ""; //地址
				obj.sex = "";
				obj.phone = "";
				obj.className = "";
				obj.majorName = "";
				obj.collegeName = "";
				this.clockTable.push(obj); //在tableData表格数组中添加对象
			},
			getsid(param) {
				let form = new FormData();
				form.append("stuId", param);
				this.$axios.post('http://localhost:8849/class/deleteInfo', form, {
					headers: {
						"Authorization": this.$cookies.get('token')
					}
				}).then(function(response) {
					console.log(response);
					if (response.data.code === 200) {}
				})
			},
			getExcelData(data) {
				let obj = {};
				const list = [];
				data.forEach((item) => {
					obj = {};
					for (const key in item) {
						if (key === '学生姓名') {
							obj.userName = item[key];
						} else if (key === '学号') {
							obj.studentId = item[key];
						} else if (key === '密码') {
							obj.password = item[key];
						} else if (key === '性别') {
							obj.sex = item[key];
						} else if (key === '手机号') {
							obj.phone = item[key];
						} else if (key === '学院') {
							obj.collegeName = item[key];
						} else if (key === '班级') {
							obj.className = item[key];
						} else if (key === '专业') {
							obj.majorName = item[key];
						}
					}
					list.push(obj);
				});
				this.clockTable = list;
			},
			changeExcel(e) {
				const tableData = ref([]);
				const files = e.target.files
				if (files.length <= 0) {
					return false
				} else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
					console.log('上传格式不正确，请上传xls或者xlsx格式');
					return false;
				}
				// 读取表格
				const fileReader = new FileReader()
				fileReader.onload = ev => {
					const workbook = XLSX.read(ev.target.result, {
						type: "binary"
					})
					const wsname = workbook.SheetNames[0]
					const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])
					console.log('ws:', ws) // 转换成json的数据
					//  dealExcel(ws) ...对数据进行自己需要的操作 
					tableData.value = ws
					this.getExcelData(ws);
					const _self = this;
					this.$axios.post('http://localhost:8849/risk-troubleshoot/getdata', {
						jsonArray: _self.clockTable,
					}, {
						headers: {
							"Authorization": this.$cookies.get('token')
						}
					}).then(function(response) {
						_self.userList = response.data.data.userList;
						_self.compare3();
						if (response.data.code === 606) {
							ElMessage.success('Oops, this is a success message.');
						} else {
							ElMessage.error('Congrats, this is a error message.');
						}
					});
					this.$axios.post('http://localhost:8849/class/saveCollege', {
						jsonArray: _self.clockTable,
					}, {
						headers: {
							"Authorization": this.$cookies.get('token')
						}
					}).then(function(response) {
						_self.userList = response.data.data.userList;
						_self.compare();
						if (response.data.code === 606) {
							ElMessage.success('Oops, this is a success message.');
						} else {
							ElMessage.error('Congrats, this is a error message.');
						}
						console.log(response);
					});
				}
				fileReader.readAsBinaryString(files[0])
			},
			filterHandler: function(value, row, column) {
				const property = column['property'];
				return row[property] === value;
			},
			ViewReason: function(val) {
				this.ReasonDialogVisible = true;
				this.reasonValue = val;
			},
			Viewprove: function(val) {
				this.proveDialogVisible = true;
				this.proveValue = val;
			},

		},
		created() {
			//
		},
		mounted() {
			const _self = this;
			this.$axios.get('http://localhost:8849/class/getUsemsInfo', {
					headers: {
						"Authorization": this.$cookies.get('token')
					}
				}).then(function(response) {
					console.log(response);
					if (response.data.code === 200) {
						// form.StudentId:response.data.data.studentId,
						_self.clockTable = response.data.data;
						console.log(_self.clockTable);
					}
				}),
				this.$axios.get('http://localhost:8849/class/getUsersInfo', {
					headers: {
						"Authorization": this.$cookies.get('token')
					}
				}).then(function(response) {
					console.log(response);
					if (response.data.code === 606) {
						// form.StudentId:response.data.data.studentId,
						_self.classTable = response.data.data;
						console.log(_self.classTable);
					}
				})
		},
		computed: {

		},
	}
</script>

<style>
</style>
